<!DOCTYPE html>
<html>
	<head>
		<title>Hikle</title>
		<base href="<?php echo URL; ?>" />
		<script type="text/javascript" src="files/js/jquery.js"></script>
		<script type="text/javascript">
		
		function set_default_value(object, default_value){
			$(object)
			.css({'color': '#CCCCCC'})
			.val(default_value)
			.click(function(){
				if($(object).val() == default_value){
					$(object)
					.val('')
					.css({'color': '#333333'})
				}
			})
			.focus(function(){
				if($(object).val() == default_value){
					$(object)
					.val('')
					.css({'color': '#333333'})
				}
			})
			.blur(function(){
				if($(object).val() == ''){
					$(object)
					.val(default_value)
					.css({'color': '#CCCCCC'})
				}
			});
		}
		
		$(document).ready(function() {
		
			set_default_value('#name', 'Type hier uw voornaam en achternaam.');
			set_default_value('#email', 'Type hier uw E-mail adres.');
			set_default_value('#message', 'Type hier uw bericht.');
		
			$('a[name=modal]').click(function(e) {
				e.preventDefault();
				var id = $(this).attr('href');
				
				// Display mask.
				var maskHeight = $(document).height();
				var maskWidth = $(window).width();

				$('#mask').css({
					'width': maskWidth,
					'height': maskHeight,
					'opacity': 0.3
				});
				
				$('#mask').show();

				var winH = $(window).height();
				var winW = $(window).width();
				
				// Display actual window.
				$(id).css('top',  winH / 2-$(id).height() / 2);
				$(id).css('left', winW / 2-$(id).width() / 2);
				$(id).show();
			});
			
			$('.window .close').click(function (e) {
				e.preventDefault();
				$('#mask, .window').hide();
			});
			
			$('#mask').click(function () {
				$(this).hide();
				$('.window').hide();
			});
		});
		
		</script>
		<style type="text/css">
		
		html{
			font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
			background-color: #F0F0F0;
			font-size: 11px;
			color: #333333;
		}
		
		body, h1, h2, h3{
			margin: 0px;
			padding: 0px;
			font-weight: normal;
		}
		
		body{
			min-width: 955px;
		}
		
		img{
			border: 0px;
		}
		
		td{
			margin: 0px;
			padding: 0px;
		}
		
		table{
			border-collapse: collapse;
			border: 0px;
		}
		
		.clear{
			clear: both;
		}
		
		#javascript_required{
			position: absolute;
			z-index: 999;
			background-color: black;
			padding: 5px;
			height: 100%;
			width: 100%;
			text-align: center;
			color: red;
		}
		
		#mask{
			position: absolute;
  			z-index: 9000;
 			background-color: #000000;
  			display: none;
		}
		
		.window{
			position: absolute;
			width: 600px;
			height: 500px;
			display: none;
			z-index: 9999;
			padding: 20px;
			background-color: #FFFFFF;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
					
		#upper{
			margin: 0px auto;
			width: 100%;
			height: 413px;
			background: no-repeat top center #121212 url('files/img/index/homeBg.jpg');
		}
		#upperInner{
			margin:0 auto;
			width:955px;
			height:377px;
			position:relative;
		}
		
		#upper h1{
			font-size: 29px;;
			color: #3694DA;
			text-align: left;
		}
		
		#upper h3{
			font-size: 14px;
			margin-top: 10px;
			text-align: center;x;
			color: #797979;
		}
			
		#buttons{
			font-size: 14px;
			margin: 40px auto;
			height: 50px;
			color: #FFFFFF;
		}
		
		#buttons .button{
			padding-top: 10px;
			cursor: pointer;
			-moz-border-radius: 3px;
			border-radius: 3px;
			float: right;
			height: 35px;
		}
		
		#buttons .button a{
			color: #FFFFFF;
			text-decoration: none;
		}
		
		#buttons .sprite{
			margin-top: 2px;
			margin-left: 10px;
			margin-right: 10px;
		}
		
		#buttons .button#facebook{
		}
		
		#buttons .button#hikle{
			width: 195px;
			background-color: #3694DA;
			margin-left: 15px;
		}
		
		#buttons .button .content{
			margin-left: 0px;
			padding-top: 3px;
			float: left;
		}
		
		#content{
			height: 400px;
		}
		
		#content h1{
			color: #000;
			margin: 50px auto 0;
			text-align: center;
			font-size: 26px;
			padding-top: 25px;
			border: 0px;
		}
		
		#content h2{
			color: #FFFFFF;
			margin: 0px auto;
			width: 955px;
			text-align: center;
			font-size: 15px;
			padding-top: 5px;
		}
		
		#content_items{
			margin: 25px auto;
			width: 700px;
			height: 200px;
			color: #000;
		}
		
		#content_items .sprite{
			padding: 4px;
			height: 20px;
		}
		
		#content_items .title{
			color: #3694DA;
			font-weight: bold;
			font-size: 15px;
		}
		
		#content_items #spacer {
			height: 50px;
		}
		
		#content_items .spacer {
			width: 20px;
		}
		
		#content_items .text {
			font-size: 11px;
			width: 200px;
		}
		
		#footer {
			margin: 15px auto;
			color: #333333;
			width: 810px;
			height: 20px;
			font-size: 12px;
			padding-top: 5px;
		}
		
		#footer_right {
			list-style-type: none;
			padding: 0px;
			margin: 0px;
		}
		
		#footer_right {
			float: right;
		}
		
		#footer_right li {
			float: left;
			padding-right: 25px;
		}
		
		#footer_right li a{
			cursor: pointer;
			text-decoration: none;
			color: #333333;
		}
		
		#footer_right li a:hover{
			text-decoration: underline;
		}
		
		#footer_left {
			float: left;
		}
		
		/* Sprites */
		
		.sprite { 
			background: url('files/img/global/sprites.png') no-repeat top left;
			border: 0px;
			float: left;
			display: inline-block;
		}
		
		.sprite.arrowDown{ background-position: 0 -80px; width: 30px; height: 30px; } 
		.sprite.backgroundA{ background-position: 0 -160px; width: 8px; height: 25px; } 
		.sprite.backgroundAHover{ background-position: 0 -235px; width: 8px; height: 25px; } 
		.sprite.backgroundSpan{ background-position: 0 -310px; width: 300px; height: 25px; } 
		.sprite.backgroundSpanHover{ background-position: 0 -385px; width: 300px; height: 25px; } 
		.sprite.calendar{ background-position: 0 -460px; width: 30px; height: 30px; } 
		.sprite.camera{ background-position: 0 -540px; width: 30px; height: 30px; } 
		.sprite.cameraWhite{ background-position: 0 -620px; width: 30px; height: 30px; } 
		.sprite.case{ background-position: 0 -700px; width: 30px; height: 30px; } 
		.sprite.caseBlue{ background-position: 0 -780px; width: 30px; height: 30px; } 
		.sprite.caseWhite{ background-position: 0 -860px; width: 30px; height: 30px; } 
		.sprite.check{ background-position: 0 -940px; width: 30px; height: 30px; } 
		.sprite.checkGreen{ background-position: 0 -1020px; width: 30px; height: 30px; } 
		.sprite.communicate{ background-position: 0 -1100px; width: 30px; height: 30px; } 
		.sprite.fb{ background-position: 0 -1180px; width: 20px; height: 20px; } 
		.sprite.fbWhite{ background-position: 0 -1250px; width: 20px; height: 20px; } 
		.sprite.friend{ background-position: 0 -1320px; width: 30px; height: 30px; } 
		.sprite.friends{ background-position: 0 -1400px; width: 30px; height: 30px; } 
		.sprite.friendsWhite{ background-position: 0 -1480px; width: 30px; height: 30px; } 
		.sprite.heart{ background-position: 0 -1560px; width: 30px; height: 30px; } 
		.sprite.heartWhite{ background-position: 0 -1640px; width: 30px; height: 30px; } 
		.sprite.hikle{ background-position: 0 -1720px; width: 20px; height: 20px; } 
		.sprite.hikleWhite{ background-position: 0 -1790px; width: 20px; height: 20px; } 
		.sprite.home{ background-position: 0 -1860px; width: 30px; height: 30px; } 
		.sprite.list{ background-position: -350px 0; width: 30px; height: 30px; } 
		.sprite.listWhite{ background-position: -350px -80px; width: 30px; height: 30px; } 
		.sprite.location{ background-position: -350px -160px; width: 30px; height: 30px; } 
		.sprite.mobile{ background-position: -350px -240px; width: 30px; height: 30px; } 
		.sprite.mobileWhite{ background-position: -350px -320px; width: 30px; height: 30px; } 
		.sprite.musicNote{ background-position: -350px -400px; width: 30px; height: 30px; } 
		.sprite.radioButton{ background-position: -350px -560px; width: 20px; height: 18px; } 
		.sprite.radioButtonChecked{ background-position: -350px -628px; width: 20px; height: 18px; } 
		.sprite.remove{ background-position: -350px -696px; width: 30px; height: 30px; } 
		.sprite.removeRed{ background-position: -350px -776px; width: 30px; height: 30px; } 
		.sprite.search{ background-position: -350px -856px; width: 30px; height: 30px; } 
		.sprite.settingsWhite{ background-position: -350px -936px; width: 30px; height: 30px; } 
		.sprite.star{ background-position: -350px -1016px; width: 30px; height: 30px; } 
		.sprite.stats{ background-position: -350px -1096px; width: 30px; height: 30px; } 
		.sprite.tiles{ background-position: -350px -1176px; width: 30px; height: 30px; }
		
		.news_item{
			padding-top: 25px;
		}
		
		.news_item img{
			width: 45px;
			float: left;
		}
		
		.news_item .news_content{
			float: left;
			width: 500px;
			margin-left: 10px;
		}
		
		.news_item .title{
			font-size: 14px;
			color: #3694DA;
		}
		
		.news_item .message{
			padding-top: 10px;
			font-size: 11px;
		}
		
		.news_item .footer{
			padding-top: 15px;
			color: gray;
			font-size: 10px;
		}
		
		#contact_form{
			margin-top: 25px;
		}
		
		#contact_form input[type=text]{
			border: 1px solid gray;
			outline: none;
			margin-top: 10px;
			margin-bottom: 10px;
			padding: 5px;
			width: 250px;
		}
		
		#contact_form #message{
			border: 1px solid gray;
			outline: none;
			margin-top: 10px;
			margin-bottom: 10px;
			padding: 5px;
			width: 590px;
			height: 150px;
		}
		#items{
				position:absolute;
				top:32px;
				left:147px;
		}
		#tekst{
			float: right;
			margin: 123px 30px 0 0;
			width: 400px;
		}
		#tekst p{
			font-size:16px;
			color:#FFF;
			font-weight:bold;
		}
		#content_container{
			margin:0 auto;
			width:955px;
		}
		#logo{
			position: absolute;
			right: 188px;
			top: 45px;
		}
		</style>
	</head>
	<body>
		<noscript><div id="javascript_required">U moet javascript aanzetten als u gebruik wilt maken van Hikle.</div></noscript>
		<div>
			<div id="news" class="window">
				<h1>Nieuws</h1>
				<div class="clear"></div>
				<div class="news_item">Er is momenteel geen nieuws.</div>
<!--
				<div class="news_item">
					<img src="https://graph.facebook.com/1101505607/picture" alt="Mike Vercoelen" />
					<table class="news_content">
						<tr>
							<td class="title">Nieuwe functionaliteit</td>
						</tr>
						<tr>
							<td class="message"></td>
						</tr>
						<tr>
							<td class="footer">Geplaatst door Mike Vercoelen op 15 November 2011</td>
						</tr>
					</table>
					<div class="clear"></div>
				</div>-->

			</div>
			<div id="contact" class="window">
				<h1>Contact</h1>
				<form method="post">
					<table id="contact_form">
						<tr><td>Naam:</td></tr>
						<tr><td><input type="text" name="name" id="name" /></td></tr>
						<tr><td>Email:</td></tr>
						<tr><td><input type="text" name="email" id="email" /></td></tr>
						<tr><td>Bericht:</td></tr>
						<tr><td><textarea name="message" id="message"></textarea></td></tr>
						<tr>
							<td><input type="submit" name="submit" value="Verzenden" /></td>
						</tr>
					</table>
				</form>
			</div>
			<div id="agreement" class="window">
				<h1>Voorwaarden</h1>
			</div>
			<div id="privacy" class="window">
				<h1>Privacy</h1>
			</div>
		 	<div id="mask"></div>
	 	</div>
        </div>
		<div id="upper">
        	<div id="upperInner">
            <div id="logo">
            	<img src="files/img/index/logo.png">
            </div>
            <div id="items">
            	<img src="files/img/index/items.png">
            </div>
            <div id="tekst">
                <h1>De openbare agenda voor jou en je vrienden.</h1>
                <p>	Maak activiteiten aan en deel deze met je vrienden, zodat je vrienden altijd weten waar, wanneer en met wie je bent.</p>
                <div id="buttons">
                    <div class="button" id="facebook">
                      <a href="<?php echo data('fb')->authUrl; ?>"><img src="files/img/index/connectFb.png"></a>
                    </div>
                   <!-- <div class="button" id="hikle">
                        <div class="sprite hikleWhite"></div>
                        <div class="content">Mijn bedrijf op Hikle</div>
                    </div> -->
               </div>
			</div>
            </div>
		</div>
		<div id="content_container">
			<div id="content">
				<h1>Wie, wat, waar en wanneer zijn jou vrienden te vinden?</h1>
				<table id="content_items">
					<tbody>
						<tr>
							<td class="icon_holder"><div class="sprite listWhite"></div></td>
							<td class="title">Deel je activiteiten</td>
							<td class="icon_holder"><div class="sprite caseWhite"></div></td>
							<td class="title">Deel je reizen</td>
							<td class="icon_holder"><div class="sprite cameraWhite"></div></td>
							<td class="title">Deel je foto's</td>
						</tr>
						<tr>
							<td class="spacer"></td>
							<td class="text">Maak activiteiten aan en deel deze met je vrienden, zodat je vrienden altijd weten waar, wanneer en met wie je bent.</td>
							<td class="spacer"></td>
							<td class="text">Maak activiteiten aan, en klik op het vliegtuigje, zo geef je aan dat je op reis gaat! Dus deel al je reizen met je vrienden.</td>
							<td class="spacer"></td>
							<td class="text">Zorg dat je foto's maakt van je activiteit en upload ze later op Hikle.</td>
						</tr>
						<tr id="spacer"><td></td></tr>
						<tr>
							<td class="icon_holder"><div class="sprite listWhite"></div></td>
							<td class="title">Automatisch overzicht</td>
							<td class="icon_holder"><div class="sprite mobileWhite"></div></td>
							<td class="title">Mobiel</td>
							<td class="icon_holder"><div class="sprite heartWhite"></div></td>
							<td class="title">Trending</td>
						</tr>
						<tr>
							<td class="spacer"></td>
							<td class="text">Als je aangemeld bent, kom je op jou automatisch overzicht. Hier ontvang je al de nieuwe activiteiten van vrienden.</td>
							<td class="spacer"></td>
							<td class="text">Download de mobiele applicatie. Beschikbaar voor iPhone, Android, BlackBerry en Windows Mobile.</td>
							<td class="spacer"></td>
							<td class="text">Blijf op de hoogte van de populairste activiteiten buiten je vrienden en volgers. Zo kom je ook te weten wat je kan gaan doen als je je verveelt.</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div id="footer">
			<div id="footer_left">Hikle &copy; 2011</div>
			<ul id="footer_right">
				<li><a href="#news" name="modal">Nieuws</a></li>
				<li><a href="#contact" name="modal">Contact</a></li>
				<li><a href="#agreement" name="modal">Voorwaarden</a></li>
				<li>Mijn bedrijf op Hikle</li>
				<li><a href="#privacy" name="modal">Privacy</a></li>
			</ul>
		</div>
	</body>
</html>